import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_news/common/router/router.dart';
import 'package:flutter_news/common/values/font_family.dart';
import 'package:flutter_news/common/values/radii.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_news/common/utils/utils.dart';
import 'package:flutter_news/common/values/values.dart';

@RoutePage()
class WelcomePage extends StatefulWidget {
  WelcomePage({Key? key}) : super(key: key);

  @override
  State<WelcomePage> createState() => _WelcomePageState();
}

class _WelcomePageState extends State<WelcomePage> {
  @override
  Widget build(BuildContext context) {
    // // 设计稿高度：需要去掉 顶部、底部导航
    // ScreenUtil.init(context, designSize: const Size(375, 812 - 44 - 34));

    return Scaffold(
      body: Center(
        child: Column(
          children: [
            _buildPageHeadTitle(),
            _buildPageHeaderDetail(),
            _buildFeatureItem(
              ImageNameUtil.feature1,
              "Compelling photography and typography provide a beautiful reading",
              86,
            ),
            _buildFeatureItem(
              ImageNameUtil.feature2,
              "Sector news never shares your personal data with advertisers or publishers",
              40,
            ),
            _buildFeatureItem(
              ImageNameUtil.feature3,
              "You can get Premium to unlock hundreds of publications",
              40,
            ),
            Spacer(),
            _buildStartButton(),
          ],
        ),
      ),
    );
  }

  /// 页面标题
  Widget _buildPageHeadTitle() {
    return Container(
      margin: EdgeInsets.only(top: duSetHeight(65)),
      child: Text(
        'Features',
        textAlign: TextAlign.center,
        style: TextStyle(
          color: AppColors.primaryText,
          fontFamily: FontFamily.montserrat,
          fontWeight: FontWeight.w600,
          fontSize: duSetFontSize(24),
        ),
      ),
    );
  }

  /// 页头说明
  Widget _buildPageHeaderDetail() {
    return Container(
      width: duSetWidth(242),
      height: duSetHeight(70),
      margin: EdgeInsets.only(top: duSetHeight(14)),
      child: Text(
        "The best of news channels all in one place. Trusted sources and personalized news for you.",
        textAlign: TextAlign.center,
        style: TextStyle(
          color: AppColors.primaryText,
          fontFamily: FontFamily.avenir,
          fontWeight: FontWeight.normal,
          fontSize: duSetFontSize(16),
          height: 1.2,
        ),
      ),
    );
  }

  /// 特性说明
  Widget _buildFeatureItem(String imageName, String intro, double marginTop) {
    return Container(
      width: duSetWidth(295),
      height: duSetHeight(80),
      margin: EdgeInsets.only(top: duSetHeight(marginTop)),
      child: Row(
        children: [
          Container(
            width: duSetWidth(80),
            height: duSetWidth(80),
            child: Image.asset(
              imageName,
              fit: BoxFit.contain,
            ),
          ),
          Spacer(),
          Container(
            width: duSetWidth(195),
            child: Text(
              intro,
              textAlign: TextAlign.left,
              style: TextStyle(
                color: AppColors.primaryText,
                fontFamily: FontFamily.avenir,
                fontWeight: FontWeight.normal,
                fontSize: duSetFontSize(16),
              ),
            ),
          ),
        ],
      ),
    );
  }

  /// 开始按钮
  Widget _buildStartButton() {
    return Container(
      width: duSetWidth(295),
      height: duSetHeight(44),
      margin: EdgeInsets.only(bottom: 20),
      child: TextButton(
        child: Text("Get started"),
        onPressed: () => {
          // Navigator.popAndPushNamed(
          //   context,
          //   "/sign-in",
          // )
          context.router.popAndPush(SignInRoute())
        },
        style: ButtonStyle(
          foregroundColor:
              MaterialStateProperty.all(AppColors.primaryElementText),
          backgroundColor: MaterialStateProperty.all(AppColors.primaryElement),
          shape: MaterialStateProperty.all(
            RoundedRectangleBorder(
              borderRadius: Radii.k6pxRadius,
            ),
          ),

          // 在这里设置按钮文本颜色无效，要使用 foregroundColor 进行设置
          // textStyle: MaterialStateProperty.all(
          //   TextStyle(),
          // ),
        ),
      ),
    );
  }
}
